Form validation in Angular JS.

We want to Form validation in Angular JS. How to vailidate please help me.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Forum</title>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="~/Scripts/jquery-2.1.4.js"></script>
    <script src="~/Scripts/angular.js"></script>
<script>
     var app = angular.module("rgValidation", []);

     app.controller("VisitorFormController", function ($scope, $http) {
         $scope.visitorInfo = {};
         $scope.storedInfo = {};
         $scope.lastSampleIndex = 0;
         $scope.update = function (formData) {
             $scope.storedInfo = angular.copy(formData);
         };

         $scope.reset = function () {
             $scope.visitorInfo = angular.copy($scope.storedInfo);
         };
         $scope.isUnchanged = function (formData) {
             return angular.equals(formData, $scope.storedInfo);
         };

         $scope.reset();

});

</script>

input {
width:320px;
}

input.ng-invalid.ng-dirty {
background-color:red;
}

/*
Unfortunately there is no consistent implementation
for placeholder, which is the reason for this ugliness
*/
input.ng-invalid.ng-dirty::-webkit-input-placeholder,
input.ng-invalid.ng-dirty::-moz-placeholder,
input.ng-invalid.ng-dirty::-ms-input-placeholder,
input.ng-invalid.ng-dirty {
color:#fff;
}

.outerwrapper {
width:550px;
}

.formwrapper {
border:1px solid #666;
border-radius:8px;
box-shadow: 5px 5px 5px #888888;
float:left;
margin-right:15px;
padding:4px;
width:450px;
background: #F7F2E0;
}

.label {
float:left;
font-size:.9em;
font-weight:bold;
text-align:right;
width:75px;
margin-right:10px;
line-height:20px;
}

.buttons {
text-align: center;
margin-top:15px;
}

.submitbtn:enabled {
background-color:green;
color:white;
}

.bold {
font-weight:bold;
}

</style>
</head>
<body ng-app="rgValidation">
<div class="outerwrapper" ng-app="rgValidation" ng-controller="VisitorFormController" >

<p>TIP: The sample button will fill the form for you.</p>

<div class="formwrapper">
  <form name="valForm"
    class="visitorInfoForm"
    novalidate >
   <span class="label">First Name:</span>
   <input name="firstName" ng-model="visitorInfo.firstName" placeholder="First Name" required />
   <span class="valid" ng-show="valForm.firstName.$valid">✔</span><br>

   <span class="label">Last Name:</span>
   <input name="lastName" ng-model="visitorInfo.lastName" placeholder="Last Name" required>
   <span class="valid" ng-show="valForm.lastName.$valid">✔</span><br>

   <span class="label">Address:</span>
   <input name="address" ng-model="visitorInfo.address" placeholder="Address" required>
   <span class="valid" ng-show="valForm.address.$valid">✔</span><br>

   <span class="label">City:</span>
   <input name="city" ng-model="visitorInfo.city" placeholder="City" required>
   <span class="valid" ng-show="valForm.city.$valid">✔</span><br>

   <span class="label">State:</span>
   <input name="state" ng-model="visitorInfo.state" placeholder="State" required>
   <span class="valid" ng-show="valForm.state.$valid">✔</span><br>

   <span class="label">Zip:</span>
   <input name="zip" type="number" ng-model="visitorInfo.zip" placeholder="Zip" required>
   <span class="valid" ng-show="valForm.zip.$valid">✔</span><br>
   <span class="label">Email:</span>
   <input name="email" type="email" ng-model="visitorInfo.email" placeholder="Email" required>
   <span class="valid" ng-show="valForm.email.$valid">✔</span><br>
   <div class="buttons">
    <button ng-click="reset()" ng-disabled="isUnchanged(visitorInfo)">CLEAR</button>
    <button class="submitbtn" ng-click="update(visitorInfo)" ng-disabled="valForm.$invalid || isUnchanged(visitorInfo)">SUBMIT</button>
   </div>
      </form>
</div>
</div>
</body>

</html>

forum

Form validation in Angular JS.

Anonymous User

Can you answer this question?

1 Answers

Liked By